<template>
    <div>
        <h3>3.4、页面构建时的注意事项</h3>
        <pre>
        - 错误信息的展示
            - 1、系统控制台（cmd）: 包扩了从命令开始启动时的所有错误（运行过程的代码逻辑错误）
                <img src="../assets/01.png" alt="" srcset="">
            - 2、服务器的HTML页面 : 服务器可以正常启动，但存在一些影响呈现运行的错误
                <img src="../assets/02.png" alt="" srcset="">
            - 3、运行过程中出错，浏览器的控制台 : 运行过程的代码逻辑错误
                !! 在服务器没有被重新启动时，热更新重载的页面不会情况浏览器控制台错误
                !! 开发时如果需要对逻辑代码进行修改验证，建议收到刷新后再做验证
                <img src="../assets/03.png" alt="" srcset="">
                <input type="button" value="触发带有逻辑语法错误的方法" @click="printFun">
        </pre>
        <hr>
        <pre>
        - 静态资源的加载
            - 1、public 的加载 - 不参与编译过程 - 类似于传统页面开发的资源装载方式
            <img src="../assets/04.png" alt="" srcset="">
            - 2、src/assets 的加载 - 参与编译过程 - 不能在index 中直接使用的
                main.js 中进行统一引入 - 作为全局静态资源加载的
                    ！！ main.js 统一加载的 js语法文件，必须是一个符合模块语法功能的js文件
                在需要的组件安装语法进行加载定义 - 针对组件的基本布局使用
            <img src="../assets/05.png" alt="" srcset="">
        </pre>
        <hr>
        <pre>
        - 开发时的图片路径问题
            - 参与编译过程的图片资源路径 = (在编译过程中会根据 组件的位置 寻找图片[src内]，编译后会进行路径重置)
                - ＜img src=""＞ 方式加载的相对路径图片
                <img src="../assets/logo.png" alt="" srcset="">
                - 单文件组件中 css 样式加载的相对路径图片
                <span class="img-bg"></span>
                - 以模块语法方式加载的相对路径图片
                <img v-bind:src="path" alt="" srcset="">
            - 不参与编译过程的图片资源路径 = (此时为保证相对路径图片可以正常加载，图片地址以 index.html 文件作为参考定义)
                - 以http协议定义的绝对路径图片
                <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="" srcset="">
                - 单文件组件中，标签行内样式中加载的图片
                <span style="border:1px solid black;display: inline-block;width:200px;height:200px;background-image: url('../assets/logo.png');"></span>
                <span style="border:1px solid black;display: inline-block;width:200px;height:200px;background-image: url('./img/a.jpg');"></span>

                - 单文件组件中以vue语法方式绑定的变量，取值相对路径图片时
                <img v-bind:src="path1" alt="" srcset="">
                <img v-bind:src="path2" alt="" srcset="">
        </pre>
        <pre>
        - vue模块项目的路径别名 
            - @ 指向 src 目录
            <img src="@/assets/loading.gif" alt="" srcset="">
            - ~ 将路径作为模块路径使用
            <!-- <img src="../../node_modules/logo.png" alt="" srcset="">
            <img src="~/logo.png" alt="" srcset=""> -->
        </pre>
    </div>
</template>

<script>
// import aaa from '1234aaa';
// import logo from '../assets/logo.png'
import logo from '@/assets/logo.png'

// import logo from '../assets/loading.gif'
// console.log(logo);
export default {
    data(){
        return {
            path:logo,
            path1:'../assets/logo.png',
            path2:'./img/a.jpg'

        }
    },
    methods:{
        printFun(){
            // let obj = null;
            //console.log(obj.user.name); 
            console.log(1111);
        }
    }
}
</script>

<style>
    .img-bg{
        width: 200px;
        height: 200px;
        display: inline-block;
        background-image: url("../assets/logo.png");
    }
</style>